<template>
	<view class="sqMyTab" :class="[currMod == 'feedBack' ? 'feedBack' :'']" :style="{top:navHeight + 'px'}">
		<view class="innerSqMyTab">
			<view class="sqTabItem"
				:class="[orderStaIndex == index ? 'active' : '']"
				v-for="(item,index) in orderStaArr"
				:key="index"
				@tap="swithOrderTab(index,item)"
			>{{item.name}}<view class="lineView"></view></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			orderStaArr:Array,
			orderStaIndex:Number,
			currMod:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				navHeight:getApp().globalData.navHeight
			}
		},
		methods:{
			swithOrderTab(index,item){
				this.$emit('swithOrderTab',index,item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sqMyTab{
		width: 100%;
		height: 100rpx;
		background: $pss-sq-main-bg;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		&.feedBack{
			background: $sq-fue;
		}
		.innerSqMyTab{
			display: flex;
			border-radius: 30rpx 30rpx 0 0;
			background: $sq-fuf;
			.sqTabItem{
				flex: 1;
				line-height: 100rpx;
				text-align: center;
				color: $sq-main8;
				font-size: 28rpx;
				position: relative;
				.lineView{
					width: 22%;
					height: 6rpx;
					background: $sq-line-linear;
					position: absolute;
					left: 39%;
					bottom: 10px;
					display: none;
				}
				&.active{
					font-weight: 600;
					color: $pss-sq-main;
					font-size: 32rpx;
					.lineView{
						display: block;
					}
				}
			}
		}
	}
</style>